<template>
  <van-row>
    <van-nav-bar
      title="送货单详情"
      left-arrow
      left-text="返回"
      @click-left="$emit('close')"
    >
      <template #right>
        <van-popover
          v-model="showPopover"
          placement="bottom-end"
          trigger="click"
          :actions="actions"
          @select="handleAction"
        >
          <template #reference>
            <van-icon name="ellipsis" size="20" />
          </template>
        </van-popover>
      </template>
    </van-nav-bar>
    <van-tabs v-model="activeTab" :swipe-threshold="3">
      <van-tab title="送货单信息">
        <van-cell title="送货单号" :value="submitForm.shipmentNo" />
        <van-cell title="日期" :value="submitForm.shipmentDate" />
        <van-cell title="客户" :value="submitForm.customerName" />
        <van-cell title="总数量" :value="submitForm.quantity" />
        <van-cell title="金额" :value="submitForm.amount" />
        <van-cell title="送货方式" :value="submitForm.customerName">
          <template #default>
            <dict-value v-model="submitForm.shipmentType" dict-key="shipment_type" />
          </template>
        </van-cell>
        <van-cell title="收件人名称" :value="submitForm.recipientName" />
        <van-cell title="收件人手机号" :value="submitForm.recipientPhoneNum" />
        <van-cell title="收件人地址" :value="submitForm.recipientAddress" />
        <div v-if="submitForm.shipmentType==='1'||submitForm.shipmentType==='2'">
          <van-cell title="承运商" :value="submitForm.carrier" />
          <van-cell title="物流单号" :value="submitForm.trackingNo" />
          <van-cell title="运费" :value="submitForm.shipCost" />
        </div>
        <van-cell title="备注" :value="submitForm.remark" />
      </van-tab>
      <van-tab title="订单信息">
        <div v-for="(item,index) in submitForm.orderList" :key="index">
          <van-divider content-position="left" :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">{{ `订单${index+1}` }}</van-divider>
          <van-cell-group inset>
            <van-cell title="产品">
              <template #title>
                <div class="title_desc">
                  {{ item.orderInfo.productName }}
                </div>
              </template>
              <template #default>
                {{ item.orderInfo.quantity }}{{ item.orderInfo.unit }}
              </template>
            </van-cell>
            <van-cell title="订单余数">
              <template #title>
                <span class="title_desc">订单余数</span>
              </template>
              <template #default>
                <div class="red">
                  {{ item.orderInfo.remainingQuantity }}{{ item.orderInfo.unit }}
                </div>
              </template>
            </van-cell>
            <van-cell title="送货数量">
              <template #title>
                <span class="title_desc">送货数量</span>
              </template>
              <template #default>
                <div class="red">
                  {{ item.quantity }}{{ item.orderInfo.unit }}
                </div>
              </template>
            </van-cell>
            <van-cell title="备注">
              <template #title>
                <span class="title_desc">备注</span>
              </template>
              <template #default>
                <div class="desc">
                  {{ item.remark }}
                </div>
              </template>
            </van-cell>
          </van-cell-group>
        </div>
      </van-tab>
    </van-tabs>
    <van-cell-group>

    </van-cell-group>
    <van-row v-if="submitForm.orderList">

    </van-row>
    <van-popup v-model="showSubmit" position="right" :style="{ width: '100%', height: '100%' }">
      <shipment-submit-module ref="submitModule" @close="handleClose" />
    </van-popup>
  </van-row>
</template>

<script>
import { deleteShipment, selectShipmentById } from '@/api/shipment'
import DictValue from '@/components/dictValue.vue'
import { Dialog } from 'vant'
import ShipmentSubmitModule from '@/views/shipment/shipmentSubmit.vue'

export default {
  name: 'ShipmentDetailModule',
  components: { ShipmentSubmitModule, DictValue },
  data() {
    return {
      activeTab: 0,
      showPopover: false,
      showSubmit: false,
      submitForm: {},
      actions: [{ icon: 'edit', text: '修改', action: 'edit', disabled: false },
        { icon: 'delete-o', text: '删除', action: 'delete', disabled: false }]
    }
  },
  methods: {
    init(id) {
      selectShipmentById(id).then(resp => {
        if (resp.success) {
          this.submitForm = resp.data
        }
      })
    },
    handleAction(row) {
      if (row.action === 'delete') {
        this.handleDelete()
      } else if (row.action === 'edit') {
        this.toEdit()
      }
    },
    toEdit() {
      this.showSubmit = true
      this.$nextTick(() => {
        this.$refs.submitModule.init(this.submitForm.id)
      })
    },
    handleDelete() {
      Dialog.confirm({
        title: '删除确认',
        message: '是否删除此信息'
      }).then(() => {
        deleteShipment({ ids: [this.submitForm.id] }).then(resp => {
          if (resp.success) {
            this.$toast.success('删除成功')
            this.$emit('close')
          }
        })
      }).catch(() => {})
    },
    handleClose() {
      this.showSubmit = false
      this.init(this.submitForm.id)
    }
  }
}
</script>

<style scoped>

</style>
